import React from 'react';
import { NavBar, InputItem, TextareaItem, Button } from 'antd-mobile'
import AvatarSelector from '../../component/avatar-selector/avatar-selector'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import { update } from '../../redux/user.redux'

@connect(
	state => state.user,
	{ update }
)
export default class GeniusInfo extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			avatar: '',
			title: '',
			desc: ''
		}
	}

	onChange(key, val) {
		this.setState({
			[key]: val
		})
	}

	render() {
		const redirectTo = this.props.redirectTo;
		const path = this.props.location.pathname;
		return (
			<div>
				{redirectTo && redirectTo !== path ? <Redirect to={redirectTo}></Redirect> : null}
				<NavBar mode="dark">牛人选择信息页</NavBar>
				<AvatarSelector selectAvatar={(val) => {
					this.setState({ avatar: val })
				}}></AvatarSelector>
				<InputItem onChange={(v) => { this.onChange('title', v) }}>
					求职职位
				</InputItem>
				<TextareaItem onChange={(v) => { this.onChange('desc', v) }}
					rows={3}
					autoHeight
					title="个人简介"
				>
				</TextareaItem>
				<Button type="primary"
					onClick={() => { this.props.update(this.state) }}
				>保存</Button>
			</div>
		)
	}
}